<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header></my-header>

        <my-footer></my-footer>
    </div>

    <template id="tmpl"> 
        <div>
            <h1>标题111</h1>
            <h2>标题222</h2>
        </div>
    </template>

    <template id="footer"> 
        <div>
            <p>我是footer</p>
            <p>{{num}}</p>
        </div>
    </template>
</body>
<script>
    // 注意事项：
    //     1.定义组件的时候，组件名可以写驼峰，也可以写 - 的形式
    //     2.调用(使用)组件的时候，组件名只能写 - 的形式。因为在html中标签名不区分大小写，浏览器认不出大写还是小写。后面Vue文件就没这个约束了
    //     3.组件只能在绑定了的Vue对象标签内使用
    //     4.template的根标签只有一个！

    // 定义全局组件
    Vue.component('myHeader', {
        template: '#tmpl'
    })

    Vue.component('my-footer', { //全局组件 跟局部组件一样，可以有自己的数组
        template: '#footer',
        data() {
            return {
                num: 111
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>

</html>